<template>
    <div>
        <div class="rankingContainer">
            <div class="ranking" v-if="officialListDetail.length != 0">
                <div class="offical">
                    <div class="title">官方榜</div>
                    <list-table
                            :officialListDetailItem="item"
                            v-for="(item, index) in officialListDetail"
                            :key="index"
                            @handleRowClick="handleRowClick"
                            @handleRowDbClick="handleRowDbClick"
                            @clickCheckAll="clickListCardItem"
                    ></list-table>
                </div>

                <div class="global">
                    <div class="title">全球榜</div>
                    <list-card
                            class="listCard"
                            :listCardData="globalList"
                            @clickListCardItem="clickListCardItem"
                    ></list-card>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {handleMusicTime} from "@/plugins/utils";

    import ListTable from "@/components/listTable/ListTable.vue";
    import ListCard from "@/components/listCard/ListCard.vue";

    export default {
        name: "ContentTr",
        components: {ListTable, ListCard},
        data() {
            return {
                officialList: [],
                officialListDetail: [],
                globalList: [],
            };
        },
        methods: {
            // 请求所有榜单
            async getAllRankings() {
                await this.$request("/toplist").then((res)=>{
                    console.log(res);
                    this.officialList = res.data.list.slice(0, 4);
                    this.globalList = res.data.list.slice(5);
                    })
            },
            // 根据榜单id请求查询歌单详细数据
            async getMusicListDetail(id) {
                await this.$request("/playlist/detail", {id}).then((result)=>{
                    console.log(result);
                    result = result.data.playlist;
                    // 对时间进行处理
                    result.tracks.forEach((item, index) => {
                        result.tracks[index].dt = handleMusicTime(item.dt);
                    });
                    this.officialListDetail.push(result);
                });
            },

            handleRowClick(event) {
                // console.log(event);
                if (document.querySelector(".selectRow")) {
                    document.querySelector(".selectRow").classList.remove("selectRow");
                }
                event.classList.add("selectRow");
            },

            // 双击 id 歌单id   index 双击歌曲在歌单中的索引
            handleRowDbClick({id, index}) {
                let musicListIndex = this.officialListDetail.findIndex(
                    (item) => item.id === id
                );// console.log(musicListIndex);
                this.$store.commit(
                    "updateMusicId",
                    this.officialListDetail[musicListIndex].tracks[index].id
                );
                // 歌单发生变化,提交歌单到vuex
                if (id !== this.$store.state.musicListId) {
                    // 将歌单传到vuex
                    this.$store.commit("updateMusicList", {
                        musicList: this.officialListDetail[musicListIndex].tracks,
                        musicListId: id,
                    });
                }
            },
            // 点击榜单进入歌单详情界面
            clickListCardItem(id) {
                // if (!this.$store.state.isLogin) {
                //     this.$message.error("登录后才能查看全部歌曲哦!");
                //     return;
                // }
                if (id.id) {
                    id = id.id;
                }
                this.$router.push({name: "musicListDetail", params: {id}});
            },
        },
        async created() {
            await this.getAllRankings();
            this.officialList.forEach((item) => {
                this.getMusicListDetail(item.id);
            });
            // console.log(this.officialListDetail);
        },
    }
</script>

<style scoped>
    .title {
        padding: 10px 0 3px;
        font-size: 1.4em;
        border-bottom: 2px #008B8B solid;
        width: 850px;
    }

    .rankingContainer {
        display: flex;
        justify-content: center;
        width: 100%;
        background-color: #f7f7f7;
    }

    .ranking {
        width: 900px;
        max-width: 960px;
        padding: 0 10px;
        border-left: 1px #cccccc solid;
        border-right: 1px #cccccc solid;
        background-color: white;

    }

    .listCard {
        margin-top: 15px;
    }
</style>